<template>
  <div class="w-full">
    <div
      class="flex flex-row items-center justify-between space-y-0 pb-2 w-full"
    >
      <h1 class="text-2xl font-bold mb-4">项目管理</h1>

      <n-button
        round
        type="primary"
        :render-icon="() => renderIcon('material-symbols:add')"
        @click="showModal = true"
      >
        新建项目
      </n-button>
    </div>

    <div class="table-container">
      <n-empty v-if="tableData.length === 0" description="暂无数据" />
      <div
        v-for="item in tableData"
        :key="item.id"
        class="table-item p-4 flex flex-row justify-between items-baseline"
      >
        <div>
          <div class="flex items-center">
            <div class="text-xl">{{ item.name }}</div>
            <span class="text-sm text-gray-500">&nbsp;-&nbsp;</span>
            <div class="text-sm text-gray-500">{{ item.team_name }}</div>
          </div>
          <p class="text-sm text-gray-500">{{ item.introduce }}</p>
        </div>
        <n-button
          ghost
          type="primary"
          @click="selectProject(item.id, item.name)"
        >
          相关任务
        </n-button>
      </div>
    </div>

    <n-modal
      v-model:show="showModal"
      title="项目"
      preset="dialog"
      positive-text="确认"
      negative-text="取消"
      @positive-click="submitCallback"
      @negative-click="showModal = false"
    >
      <div class="mt-4">
        <div class="form-item">
          <div class="form-item-label">
            <Icon icon="line-md:folder" class="w-4 h-4" />
            <span class="text-sm font-medium">项目名称</span>
          </div>
          <n-input v-model:value="formData.name" placeholder="请输入项目名称" />
        </div>
        <div class="form-item">
          <div class="form-item-label">
            <Icon icon="line-md:text-box-multiple" class="w-4 h-4" />
            <span class="text-sm font-medium">项目介绍</span>
          </div>
          <n-input
            v-model:value="formData.introduce"
            type="textarea"
            placeholder="请输入项目介绍"
          />
        </div>
        <div class="form-item">
          <div class="form-item-label">
            <Icon icon="line-md:person-add-twotone" class="w-4 h-4" />
            <span class="text-sm font-medium">项目团队</span>
          </div>
          <n-select
            v-model:value="formData.team_id"
            :options="teamOptions"
            placeholder="请选择项目团队"
          />
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useIcon } from "@/hook/IconHook";
import {
  NButton,
  NModal,
  NInput,
  NSelect,
  NEmpty,
  type SelectOption,
} from "naive-ui";
import type { CreateProjectParams } from "@/api/project/type";
import type { ProjectModel } from "@/api/project/model";
import { getProjectList, createProject } from "@/api/project";
import { Icon } from "@iconify/vue";
import { getTeamList } from "@/api/team";
import type { TeamModel } from "@/api/team/model";
import { message } from "@/utils/message";

const emit =
  defineEmits<(e: "changeProject", id: number, name: string) => void>();

const { renderIcon } = useIcon();
const showModal = ref(false);
const teamList = ref<TeamModel[]>([]);
const formData = ref<CreateProjectParams>({
  id: 0,
  name: "",
  introduce: "",
  team_id: 1,
});

const teamOptions = computed<SelectOption[]>(() => {
  return teamList.value.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
});

const tableData = ref<ProjectModel[]>([
  {
    id: 1,
    name: "大屏展示",
    introduce: "大屏项目用于展示工作面电液控实时采集数据",
    team_id: 1,
    team_name: "测试团队",
  },
  {
    id: 1,
    name: "大屏展示",
    introduce: "大屏项目用于展示工作面电液控实时采集数据",
    team_id: 1,
    team_name: "测试团队",
  },
]);

const selectProject = (id: number, name: string) => {
  emit("changeProject", id, name);
};

const submitCallback = async () => {
  const res = await createProject(formData.value);
  if (res.code === 200) {
    message.success("创建项目成功");
  } else {
    message.error(res.message);
  }
};

onMounted(async () => {
  const res = await getTeamList();
  if (res.code === 200) {
    teamList.value = res.data;
  }

  const res1 = await getProjectList();
  if (res.code === 200) {
    tableData.value = res1.data;
  }
});
</script>

<style scoped>
.table-container {
  border: 1px solid rgba(239, 239, 245, 1);
  border-radius: 5px;
}

.table-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
</style>
